<template>
	<div class="speak-wait-time-wrapper">
		<el-form-item :label="label" :required="required" :prop="prop" :rules="rules">
			<el-popover popper-class="max-tips-wrapper" placement="top-start" trigger="hover" content="最大次数为99，0代表执行下一步操作，-1代表无限次" v-if="maxTips">
				<span slot="reference" class="el-icon-warning-outline max-tips"></span>
			</el-popover>

			<el-input :value="value" :disabled="showDetail" :placeholder="placeholder" :minlength="minlength" :maxlength="maxlength" @input="updateValue" @change="onChange" :id="prop"> </el-input>
		</el-form-item>
	</div>
</template>

<script>
export default {
	props: {
		label: {
			type: String,
			required: true,
			default: () => ''
		},
		value: {
			type: String,
			required: true,
			default: () => ''
		},
		prop: {
			type: String,
			required: true,
			default: () => ''
		},
		required: {
			type: Boolean,
			default: () => false
		},
		showDetail: {
			type: Boolean,
			default: () => false
		},
		placeholder: {
			type: String,
			required: true,
			default: () => ''
		},
		minlength: {
			type: Number,
			default: () => 1
		},
		maxlength: {
			type: Number,
			default: () => 7
		},
		rules: {
			type: Object,
			default: () => {}
		},
		maxTips: {
			type: Boolean,
			default: () => false
		}
	},
	methods: {
		updateValue(e) {
			this.$emit('input', this.prop, e);
		},
		onChange() {
			this.$emit('onChange', this.prop);
		}
	}
};
</script>

<style></style>
